<!-- 老年人中药管理 -->
<script lang="ts" setup>
import { IA00_03, IB04_53 } from "@/model";
import {
  ElForm,
  ElRow,
  ElCol,
  ElInput,
  ElFormItem,
  ElDatePicker,
} from "element-plus";
import { reactive } from "vue";
import { useDoctorSelect } from "../useCommonApi";
import agedTcm from "@/views/archive/HealthArchives/agedTcm";

const formModel = reactive<Partial<IB04_53>>({});
const props = defineProps<{ healthArchives?: Partial<IA00_03> }>();
console.log(props);
const { doctorsList } = useDoctorSelect();
const { tableList, resultList } = agedTcm(formModel);

const save = async () => {};
defineExpose({ save });
</script>

<template>
  <ElForm :inline="true">
    <!--    <ElRow>-->
    <!--      <ElCol :span="12">-->
    <!--        <ElFormItem label="姓名">-->
    <!--          <ElInput readonly :value="props.healthArchives?.a00_03_04" />-->
    <!--        </ElFormItem>-->
    <!--      </ElCol>-->
    <!--      <ElCol :span="12">-->
    <!--        <ElFormItem label="健康档案号">-->
    <!--          <ElInput readonly :value="props.healthArchives?.a00_03_05" />-->
    <!--        </ElFormItem>-->
    <!--      </ElCol>-->
    <!--    </ElRow>-->

    <ElRow>
      <ElCol :span="8">
        <ElFormItem label="随访日期">
          <ElDatePicker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="formModel.b04_053_03"
          />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label="责任医生">
          <ElSelect v-model="formModel.b04_053_04">
            <ElOption
              v-for="item in doctorsList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label="服务方式">
          <ElRadioGroup v-model="formModel.b04_053_45">
            <ElRadio label="1">门诊</ElRadio>
            <ElRadio label="2">家庭</ElRadio>
            <ElRadio label="3">电话</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
      </ElCol>
    </ElRow>
    <table>
      <tr>
        <th colspan="6">中老年人中医药健康管理服务记录表</th>
      </tr>
      <tr>
        <td class="left">请根据近一年的体检和感觉，回答一下问题。</td>
        <td>
          <div class="center">没有</div>
          (根本不/从来没有)
        </td>
        <td>
          <div class="center">很少</div>
          (有一点/偶尔)
        </td>
        <td>
          <div>有时</div>
          (有些/少数时间)
        </td>
        <td>
          <div>经常</div>
          (相当/多数时间)
        </td>
        <td>
          <div>总是</div>
          (非常/每天)
        </td>
      </tr>
      <tr v-for="data in tableList" :key="data.field">
        <td class="left">{{ data.label }}</td>
        <td v-for="item in [1, 2, 3, 4, 5]" :key="item">
          <ElFormItem>
            <ElRadio v-model="formModel[data.field]" :label="item">{{
              item
            }}</ElRadio>
          </ElFormItem>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <th style="line-height: 24px; height: 24px" colspan="10">
          体质辨识结果预览
        </th>
      </tr>
      <tr>
        <td>体质类型</td>
        <td v-for="item in resultList" :key="item.name">{{ item.name }}</td>
      </tr>
      <tr>
        <td>体质辨识</td>
        <td v-for="(item, index) in resultList" :key="item.resultField">
          <ElFormItem label="得分">
            <ElInput type="number" v-model="formModel[item.sumField]" />
          </ElFormItem>
          <ElFormItem>
            <ElRadioGroup v-model="formModel[item.resultField]">
              <ElRadio label="1">是</ElRadio>
              <ElRadio label="2">{{
                index === resultList.length - 1 ? "基本是" : "倾向是"
              }}</ElRadio>
              <ElRadio label="0">否</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
        </td>
      </tr>
      <tr>
        <td>中医药保健指南</td>
        <td v-for="item in resultList" :key="item.adviseField">
          <ElFormItem>
            <ElCheckboxGroup v-model="formModel[item.adviseField]">
              <ElCheckbox label="1">1.情志调摄</ElCheckbox>
              <ElCheckbox label="2">2.饮食调养</ElCheckbox>
              <ElCheckbox label="3">3.起居调摄</ElCheckbox>
              <ElCheckbox label="4">4.运动保健</ElCheckbox>
              <ElCheckbox label="5">5.穴位保健</ElCheckbox>
              <br />

              <ElCheckbox label="6">6.其他</ElCheckbox>
            </ElCheckboxGroup>
          </ElFormItem>
          <ElFormItem>
            <ElInput v-model="formModel[item.otherField]" />
          </ElFormItem>
        </td>
      </tr>
    </table>
  </ElForm>
</template>

<style scoped lang="scss">
table,
table tr th,
table tr td {
  border: 1px solid #0094ff;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.left {
  text-align: left;
}

.el-form--inline :deep(.el-form-item) {
  margin-right: 0;

  .el-radio {
    margin-right: 10px;
  }

  .el-checkbox {
    margin-right: 10px;
  }
}
</style>
